<template>
<el-card class="box-card" style="width: 100%">
  <!-- --------------------------------搜索---------------------------------------- -->
  <div slot="header" class="clearfix" >
      <el-form :inline="true" :model="query">
        <el-form-item label="搜索：">
          <el-input
            size="small"
            v-model="query.empName"
            placeholder="员工姓名"
            :clearable="true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="loadEmp()"
            >搜索</el-button> 
             <el-button size="small" type="primary" icon="el-icon-plus" @click="dialog.addshow = true"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- --------------------------------表格---------------------------------------- -->
  <el-table size="small" @selection-change="selectChange" :data="empList" border element-loading-text="拼命加载中" style="width: 100%">
    <el-table-column align="center" type="selection" width="50"></el-table-column>
    <el-table-column align="center" prop="empId" label="员工id" width="180"></el-table-column>
    <el-table-column align="center" prop="empName" label="员工姓名" width="180"> </el-table-column>
    <el-table-column align="center" prop="deptId" label="部门id" width="100"></el-table-column>
    <el-table-column align="center" prop="deptName" label="部门名称" width="180"></el-table-column>
    <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.empId)"
            >编辑</el-button
          >
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.row.empId)">
            <el-button
            slot="reference"
            size="mini"
            type="danger"           
            >删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
    <!-- --------------------------------添加---------------------------------------- -->
    <el-dialog title="添加员工" :visible.sync="dialog.addshow" width="30%">
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="员工名称" prop="empName">
              <el-input  v-model="addForm.empName" placeholder="请输入员工姓名"></el-input>
            </el-form-item>
            <el-form-item label="所属部门" :label-width="formLabelWidth">
              <el-select v-model="addForm.deptId" placeholder="请选择部门">
                <el-option
                  v-for="(dept, index) in deptList"
                  :key="index"
                  :label="dept.deptName"
                  :value="dept.deptId"
                ></el-option>
              </el-select> </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialog.addshow = false">取 消</el-button>
        <el-button size="small" type="primary" @click="save()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- --------------------------------修改---------------------------------------- -->
    <el-dialog title="修改员工信息" :visible.sync="dialog.updateshow" width="30%">
      <el-form ref="updateForm" :model="updateForm" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="员工名称" prop="empName">
              <el-input v-model="updateForm.empName"></el-input>
            </el-form-item>
            <el-form-item label="所属部门" :label-width="formLabelWidth">
          <el-select v-model="updateForm.deptId" placeholder="请选择部门">
            <el-option
              v-for="(dept, index) in deptList"
              :key="index"
              :label="dept.deptName"
              :value="dept.deptId"
            ></el-option>
          </el-select>
        </el-form-item>
          </el-col>
         
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateshow = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </span>
    </el-dialog>
    </el-card>
</template>

<script>
export default {
  data() {
    return {
      empList: [],
      deptList: [],
      page:{
        pageSizes:[5, 10, 20, 50, 100],
        total:0
      },
      query:{
        currentPage:1,
        pageSize:5,
        empName:""
      },
      dialog:{
        addshow: false,
        updateshow:false,
      },
      addForm: {},
      updateForm:{}, 
      rules: {
        name: [
          { required: true, message: '请输入客户姓名', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,
            required: true,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        sex: [
          { required: true, message: '请输入客户性别', trigger: 'blur' }
        ],
        add1: [
          { required: true, message: '请输入客户地址', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请输入客户账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入客户密码', trigger: 'blur' }
        ]
      }
    };  
  },
  methods: {
    loadEmp(){
        this.$axios.post("http://localhost:9000/select",this.query)
        .then(res=>{
            this.empList = res.data.data.empList;
            this.page.total = res.data.data.total;
        })
    },
    loadDepts() {
      this.$axios.get("http://localhost:9000/department/selectAll").then((res) => {
        this.deptList = res.data.data.deptList;
      });
    },
    handleSizeChange(size) {      
      this.query.pageSize = size;
      this.loadEmp();
    },
    //当页数改变时
    handleCurrentChange(currentPage) {     
      this.query.currentPage = currentPage;
      this.loadEmp();
    },
    save() {
      this.$axios
        .post("http://localhost:9000/insert/", this.addForm)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("添加成功");
            this.dialog.addshow = false;
            this.addForm = {};
            this.loadEmp();
            this.$refs.addForm.resetFields();
          } else {
            this.$message.error("出错了！请稍后重试");
          }
        })
        .then(() => {
          //注意要指定prop="did"属性才能起作用
          this.$refs.addForm.resetFields();
        });
    },
    handleEdit(id) {
      this.$axios
        .get("http://localhost:9000/selectById/" + id)
        .then((resp) => {
          this.updateForm = resp.data.data.employee;
        })
        .catch((error) => {
          this.$message.error("出错了,请稍后重试");
        });
      this.dialog.updateshow = true;
    },
    update() {
      this.$axios
        .put("http://localhost:9000/update/", this.updateForm)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("修改成功");
            this.dialog.updateshow = false;
            this.loadEmp();
          } else {
            this.$message.error("出错了！请稍后重试");
          }
        })
        .then(() => {
          this.$refs.updateForm.resetFields();
        });
    },
    handleDelete(id) {
      this.$axios
        .delete("http://localhost:9000/deleteEmployerById/" + id)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("删除成功");
            this.loadEmp();
          } else {
            this.$message.success("出错了！请稍后重试");
          }
        })
    }
  },
  mounted(){
    this.loadEmp();
    this.loadDepts();
  }
};
</script>
<style>
h1,
.box-card {
  margin: auto;
  width: 60%;
}

.el-form-item {
  margin-bottom: 0;
}

[v-cloak] {
  display: none;
}
</style>